<template>
  <div class="my-dialog">
    <el-dialog v-model="visible" class="h-80vh p-20px box-border" width="80vw" v-bind="attrs" @open="clear">
      <div class="overflow-y-auto h-1/1 sucai">
        <SuCaiKu v-bind="attrs" @get-url="getUrl" ref="sucaiRef" :limit="1"></SuCaiKu>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import SuCaiKu from "@/components/SucaiKu/index.vue";
import { ref } from "vue";
import { useAttrs } from "vue";
const attrs = useAttrs();

const emits = defineEmits(["getUrl"]);
const visible = ref(false);

const sucaiRef = ref<InstanceType<typeof SuCaiKu> | null>();

const acceptParams = () => {
  visible.value = true;
};
const getUrl = (val: any) => {
  emits("getUrl", val);
};
const close = () => {
  visible.value = false;
};

const clear = () => {
  sucaiRef.value?.clear();
};

defineExpose({ acceptParams, close, clear });
</script>

<style lang="scss" scoped>
:deep(.el-overlay) {
  .el-overlay-dialog {
    .el-dialog {
      .el-dialog__body {
        height: 100%;
        .file-list {
          position: relative;
          .el-pagination {
            bottom: 0;
            background-color: var(--el-bg-color);
          }
        }
      }
    }
  }
}
</style>
